<style>
    /* Make the image fully responsive */
    .carousel-inner img {
        width: 100%;
        max-height: 20rem;
    }
</style>
<div class="layui-carousel" id="carousel-id">
    <div carousel-item class="carousel-image">
        {% for carousel in carousels %}
            <div><a href="{{ carousel.href }}"> <img src="/media/{{ carousel.img }}"></a></div>
        {% endfor %}
    </div>
</div>
<style>
    .carousel-image img {
        height: 210px;
        width: 100%;
    }
</style>
<script>
  layui.use('carousel', function () {
    const carousel = layui.carousel
    //建造实例
    carousel.render({
      elem: '#carousel-id'
      , width: '100%' //设置容器宽度
      , height: '210px'
      , arrow: 'always' //始终显示箭头
    })
  })
</script>


